<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文章类型管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
  <style>
    .operation-cell {
      text-align: center;
    }
    .operation-cell .layui-btn {
      margin: 0 2px;
    }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-body">
    <div style="padding: 15px;">
      <div class="layui-card">
        <div class="layui-card-header">
          <div class="layui-row">
            <div class="layui-col-md6">
              <h2>文章类型列表</h2>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
              <button class="layui-btn layui-btn-normal" id="btn-add">
                <i class="layui-icon layui-icon-add-1"></i> 新增类型
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-body">
          <table class="layui-table" id="category-table" lay-filter="category-table"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 编辑表单模板 -->
<script type="text/html" id="form-template">
  <form class="layui-form" lay-filter="category-form" style="padding: 20px;">
    <input type="hidden" name="id">
    <div class="layui-form-item">
      <label class="layui-form-label">类型名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">排序号</label>
      <div class="layui-input-block">
        <input type="number" name="sort" value="0" lay-verify="number" placeholder="请输入排序号" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<!-- 表格操作列模板 -->
<script type="text/html" id="table-operation">
  <div class="operation-cell">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
  </div>
</script>

<script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
<script>
// 初始化数据
function initData() {
  if (!localStorage.getItem('articleCategories')) {
    var defaultData = [
      {id: 1, name: '技术文章', sort: 1, status: true},
      {id: 2, name: '生活随笔', sort: 2, status: true},
      {id: 3, name: '学习笔记', sort: 3, status: false}
    ];
    localStorage.setItem('articleCategories', JSON.stringify(defaultData));
  }
}

// 获取所有分类
function getCategories() {
  var data = localStorage.getItem('articleCategories');
  return data ? JSON.parse(data) : [];
}

// 保存分类
function saveCategories(categories) {
  localStorage.setItem('articleCategories', JSON.stringify(categories));
}

layui.use(['table', 'form', 'layer','element'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$;
  
  // 初始化数据
  initData();
  
  // 渲染表格
  table.render({
    elem: '#category-table',
    data: getCategories(),
    cols: [[
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'name', title: '类型名称'},
      {field: 'sort', title: '排序号', width: 100, sort: true},
      {field: 'status', title: '状态', width: 100, templet: function(d){
        return d.status ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge">禁用</span>';
      }},
      {title: '操作', width: 150, toolbar: '#table-operation', fixed: 'right'}
    ]],
    page: true
  });
  
  // 新增按钮点击事件
  $('#btn-add').click(function(){
    console.log('新增按钮点击');
    
    showForm();
  });
  
  // 表格工具条事件
  table.on('tool(category-table)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit') {
      showForm(data);
    } else if(obj.event === 'delete') {
      layer.confirm('确定要删除该文章类型吗？', function(index){
        var categories = getCategories().filter(item => item.id !== data.id);
        saveCategories(categories);
        table.reload('category-table');
        layer.close(index);
        location.reload();
      });
    }
  });
  
  // 显示表单弹窗
  function showForm(data) {
    var title = data ? '编辑文章类型' : '新增文章类型';
    var content = $('#form-template').html();
    
    var index = layer.open({
      type: 1,
      title: title,
      content: content,
      area: ['500px', '400px']
    });
    
    // 表单赋值
    if(data) {
      form.val('category-form', {
        id: data.id,
        name: data.name,
        sort: data.sort,
        status: data.status
      });
    }
  }
  
  // 表单提交
  form.on('submit(form-submit)', function(data){
    var formData = data.field;
    var categories = getCategories();
    
    if(formData.id) {
      // 编辑
      categories = categories.map(item => {
        return item.id == formData.id ? {
          id: parseInt(formData.id),
          name: formData.name,
          sort: parseInt(formData.sort),
          status: formData.status === 'on'
        } : item;
      });
    } else {
      // 新增
      var newId = categories.length > 0 ? Math.max(...categories.map(item => item.id)) + 1 : 1;
      categories.push({
        id: newId,
        name: formData.name,
        sort: parseInt(formData.sort),
        status: formData.status === 'on'
      });
    }
    
    saveCategories(categories);
    table.reload('category-table');
    layer.closeAll();
    location.reload();
    return false;
  });
});
</script>
</body>
</html>